import React, { Component } from 'react'
import listcss from "./index.module.css"
import Item from "../Item"
import PubSub from 'pubsub-js';

export default class List extends Component {
    state = {
        users: []
    }

    // 组件挂载完成时就监听消息
    componentDidMount() {
        // 监听消息
        PubSub.subscribe('users', (_, data) => {
            // 接收到订阅的消息后更新状态
            this.setState({
                users: data
            })
        })
    }

    render() {
        const { users } = this.state
        return (
            <div className={listcss.main}>
                {
                    users.map(item => {
                        return (
                            <Item key={item.id} item={item} />
                        )
                    })
                }
            </div>
        )
    }
}
